<template>
	<view>
		<!-- 主体 -->
		<view class="page page-bottom-bar hotel-list" style="padding-bottom: 0;">
			<view class="search-drop">
				<!-- 搜索 -->
				<view class="search-box flex-row-between">
					<view class="search flex-row-between">
						<view class="city flex-row-between" @click="goNext('/pages/hotel/city')">
							<text class="font15">{{city.name.substring(0,2)}}</text>
							<view class="iconfont triangle"></view>
						</view>
						<!--  #ifdef  MP-WEIXIN -->
						<image class="icon" src="https://static.newbeaconhotels.com/app/hotel/icon-serach1.png"></image>
						<!--  #endif -->
						<input type="search" name="search" :value="initData.param.name" confirm-type="搜索"
						 placeholder="搜索关键字/品牌/酒店名/地名" placeholder-style="color:#c8c8c8;"
						 @input="Oninput" @confirm="Onsearch"/>
						 <view class="v-clear flex-row-start">
							<uni-icons v-if="initData.param.name" type="clear" size="18" color="#c0c0c0" @tap="Onclear"></uni-icons>
						</view>
						<!--  #ifdef  H5 -->
						<image class="icon" src="https://static.newbeaconhotels.com/app/hotel/icon-serach1.png" @click="Onsearch"></image>
						<!--  #endif -->
					</view>
				</view>
				<view class="combine-box flex-row-start">
					<!-- 日期选择 -->
					<view class="date-box flex-row-start" @tap="openCalendar">
						<view class="date font11">
							<view>住<uni-dateformat class="format" :date="calendar.startDate" format="MM-dd"></uni-dateformat></view>
							<view>离<uni-dateformat class="format" :date="calendar.endDate" format="MM-dd"></uni-dateformat></view>
						</view>
						<view class="tag">{{calendar.dayCount}}晚</view>
						<view class="iconfont triangle"></view>
					</view>
					<!-- 推荐排序 -->
					<view class="tj font13">推荐排序</view>
				</view>
				<!-- 筛选 -->
				<HMfilterDropdown
					class="drop-box"
					:menuTop="96"
					:defaultSelected="[0]"
					:filterData="filterData"
					:updateMenuName="true"
					dataFormat="Object"
					@confirm="onDropdown">
				</HMfilterDropdown>
			</view>
			<view class="hr10"></view>
			<!-- 列表 -->
			<LoadMore ref="LoadMore" id="LoadMore" :token="false" :diffHeight="232" :initData="initData" @dataRefresh='dataRefresh'>
				<view class="box-goods">
					<block v-for="(item, index) in dataList" :key="index">
						<view class="item flex-row-start flex-start" @click="goNext('/pages/owner/hotelDetail?id=' + item.id)">
							<view class="image bg-cover" :style="{backgroundImage: 'url(' + (imgPath + item.logo) + ')'}">
								<!-- <view class="tag" :class="{'tag1': item.hotel_type == 'direct', 'tag2': item.hotel_type == 'franchise'}" v-if="item.hotel_type">{{item.hotel_type == 'direct' ? '直营店' : '加盟店'}}</view> -->
							</view>
							<view class="info">
								<view class="name font15 ellipsis">{{item.name}}</view>
								<view class="recommend-p1 flex-row-start">
									<image class="icon" src="https://static.newbeaconhotels.com/app/hotel/icon-lan.png"></image>
									<view v-if="item.itude" class="font12 font-969696">距您{{item.itude}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.areaName}}</view>
									<view v-else class="font12 font-969696">{{item.areaName}}</view>
								</view>
								<view class="recommend-p2 font12">
									<text class="font-assist">{{item.score}}分</text>
									<text class="font-969696">{{item.number}}条评论</text>
								</view>
								<view class="recommend-p3 flex-row-start flex-wrap" v-if="item.tags && item.tags.length > 0">
									<view class="tag" v-for="(tag, i) in item.tags" :key="i">{{tag}}</view>
								</view>
							</view>
							<view class="avg-price font-assist font12">￥<text class="font18">{{item.price}}</text>起</view>
						</view>
					</block>
				</view>
			</LoadMore>
		</view>
		<!-- 日历组件 -->
		<JCalendar ref="calendar" :themeColor="themeColor" mode="2" :startDate="calendar.startDate" :endDate="calendar.endDate" :dayCount="calendar.dayCount" @callback="bookCalendar"></JCalendar>
		<!-- 底部菜单 -->
		<OwnerTabBar :selected="0" id="tabBar"></OwnerTabBar>
	</view>
</template>

<script>
	import HMfilterDropdown from '@/components/HM-filterDropdown/index.vue';
	import OwnerTabBar from '@/components/j-OwnerTabBar/index.vue';
	import LoadMore from "@/components/j-loadMore/index.vue";
	import JCalendar from '@/components/j-calendar/index.vue';
	export default {
		components: { HMfilterDropdown, OwnerTabBar, LoadMore, JCalendar },
		data() {
			return {
				themeColor: '#03004c',
				imgPath: this.$Config.http_static, // 图片头
				// 日历
				calendar: {
					startDate: '', // 默认入住日期
					endDate: '', // 默认离店日期
					dayCount: '1'
				},
				// 城市(默认武汉)
				city: {
					id: 203,
					name: '武汉'
				},
				// 综合排序
				filterData: [
					{
						name: '综合排序',
						type: 'hierarchy',
						submenu: [
							{ name: "默认排序", value: "" },
							{ name: "距离优先", value: "location" },
							{ name: "低价优先", value: "avg_price=asc" },
							{ name: "高价优先", value: "avg_price=desc" }
						]
					}
				],
				dataList: [],
				// 传参数据
				initData: {
					url: 'hotel',
					param: {
						city: 203,
						name:'',
						order: '', // 低价avg_price=asc；高价avg_price=desc
						lng: '', // 经度
						lat: '', // 纬度
					}
				},
				// 定位
				h5share: true, // 当前页面是否单独获取签名
				location: {}, // 当前的位置信息
			}
		},
		onLoad: function(options) {
			// 开启定位
			// #ifdef MP-WEIXIN
			this.Onlocation()
			// #endif
			
			// #ifdef H5
			this.$wxapi.OnwxSdk().then(res => {
				if (res.code == 1) {
					this.Onshare()
					this.Onlocation()
				} else {
					uni.showToast({ icon: 'none', title: '获取定位失败' });
					this.location = {}
				}
			})
			// #endif
			
			// 开启监听选择城市事件
			uni.$on('chooseCity', (res) => {
				this.city = res
				this.initData.param.city = res.id
				this.$refs.LoadMore.oncutRefresh(this.initData)
			})
		},
		onShow: function () {
			// 隐藏默认菜单
			uni.hideTabBar();
		},
		onUnload:function(){
			// 关闭监听选择城市事件
			uni.$off('chooseCity')
		},
		methods: {
			// 搜索输入框
			Oninput(e){
				this.initData.param.name = e.detail.value
			},
			// 清空输入框
			Onclear(){
				this.initData.param.name = ''
				this.$refs.LoadMore.oncutRefresh(this.initData)
			},
			// 点击搜索
			Onsearch(){
				this.$refs.LoadMore.oncutRefresh(this.initData)
			},
			// 筛选列表
			onDropdown(e) {
				let val = e.value[0][0]
				if (val == 'location') {
					this.initData.param.order = ''
					this.initData.param.lat = this.location.lat
					this.initData.param.lng = this.location.lng
				} else {
					this.initData.param.order = e.value[0][0] == null ? '' : e.value[0][0]
					this.initData.param.lat = ''
					this.initData.param.lng = ''
				}
				this.$refs.LoadMore.oncutRefresh(this.initData)
			},
			// LoadMore返回列表数据
			dataRefresh(e){
				this.dataList = e
			},
			// 打开日历
			openCalendar () {
				this.$refs.calendar.openCalendar()
			},
			// 选择的预订日期
			bookCalendar (date) {
				console.log('酒店列表选择的日期' + JSON.stringify(date))
				let hotelQuery = {
					calendar: date
				}
				uni.setStorage({key: 'hotelQuery', data: hotelQuery})
				this.calendar = date
			},
			// 定位
			Onlocation() {
				let $this = this
				// #ifdef MP-WEIXIN
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						$this.location.lat = res.latitude
						$this.location.lng = res.longitude
					},
					fail: function(res) {
						$this.location = {}
						uni.showModal({
							title: '定位拒绝',
							content: '为了更好的体验请您点击右上角进入设置手动开启定位服务',
							confirmText: '我知道了',
							confirmColor: $this.themeColor,
							showCancel: false,
							success(res) {
								if (res.confirm) {
									console.log('用户点击确定')
								}
							}
						})
					}
				});
				// #endif

				// #ifdef H5
				this.$wxapi.Onlocation().then(res => {
					if (res.code == 1) {
						$this.location.lat = res.data.latitude
						$this.location.lng = res.data.longitude
					} else {
						$this.location = {}
					}
				})
				// #endif
			},
			// 路由跳转: tag默认false,tag=true跳到tabBar页面
			goNext(url, tag) {
				if (tag) {
					uni.switchTab({ url: url });
				} else {
					uni.navigateTo({ url: url });
				}
			}
		}
	}
</script>

<style lang="less">
	@import url("../home/goods.less");
	@import url("../hotel/style.less");
</style>
